<template>
    <div class="statistics-section-item">
        <VChart ref="chartRef" :option="options"/>
    </div>
</template>

<script setup>
import VChart from "vue-echarts";
import {use} from "echarts";
import {GridComponent} from "echarts/components";
import {LineChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {UniversalTransition} from "echarts/features";
import {getInspectionTrend} from "@/api/Dashboard/InspectionTrend.js";

use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

const entries = Array.from({length: 12}, (_, i) => [i + 1, 0]);
const total = ref(entries.reduce((acc, [key, value]) => ({...acc, [key]: value}), {}));
const questionable = ref({...total.value});

const options = ref({
    title: {
        text: '各月巡查趋势图',
        left: 'right',
        top: 0,
        right: '10px',
        bottom: 0
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: 10,
        right: 10,
        top: 40,
        bottom: 20,
        containLabel: true
    },

    legend: {
        data: ['巡查总数', '不规范数']
    },
    xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '巡查总数',
            data: [105, 145, 138, 69, 63, 148, 130, 184, 173, 137, 110, 149],
            type: 'line',
            smooth: true,
            lineStyle: {
                color: '#004564'
            }
        },
        {
            name: '不规范数',
            data: [57, 153, 71, 67, 164, 158, 78, 93, 99, 82, 186, 98],
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "rgba(198, 35, 35, 1)"
            }
        }
    ]
});

const getData = async () => {
    const res = await getInspectionTrend();
    const {all, hasProblem} = res.data
    all.forEach(item => {
        if (total.value.hasOwnProperty(item.months)) total.value[item.months] = item.counts;
    });
    hasProblem.forEach(item => {
        if (questionable.value.hasOwnProperty(item.months)) questionable.value[item.months] = item.counts;
    });
    // console.log(total.value, questionable.value)

    options.value.series[0]['data'] = Object.values(total.value);
    options.value.series[1]['data'] = Object.values(questionable.value);
}

onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">

</style>